<template>
  <div class="ms-table">
    <u-table
      :data="tableData"
      border
      use-virtual
      class="table"
      ref="multipleTable"
      :height="tableHeight"
      header-cell-class-name="table-header"
      @selection-change="handleSelectionChange"
    >
      <u-table-column
        type="selection"
        width="55"
        fixed
        align="center"
      ></u-table-column>
      <u-table-column type="index" width="50" fixed />
      <u-table-column
        v-for="item in columns"
        :key="item.id"
        :show-overflow-tooltip="true"
        :prop="item.columnEnName"
        :label="item.columnCnName"
        min-width="120"
      ></u-table-column>
      <u-table-column
        v-if="handleBts.length > 0"
        label="操作"
        fixed="right"
        width="250"
      >
        <template slot-scope="scope">
          <el-button
            v-for="(item, index) in handleBts"
            :type="item.btType"
            :key="index"
            size="mini"
            plain
            v-waves
            class="vButton"
            @click="handleMenuClick(item.funName)"
          >
            {{ item.btName }}
          </el-button>
        </template>
      </u-table-column>
    </u-table>
  </div>
</template>

<script>
  import pagination from './pagination.vue'
  export default {
    // 组件名称
    name: 'publicTable',
    // 组件参数 接收来自父组件的数据
    props: {
      tableData: {
        type: Array,
        required: true,
      },
      columns: {
        type: Array,
        required: true,
      },
      handleBts: {
        type: Array,
        required: true,
      },
    },
    // 局部注册的组件
    components: { pagination },
    // 组件状态值
    data() {
      return {
        rowHeight: 55,
        diaTabHeight: 200,
      }
    },
    // 计算属性
    computed: {
      tableHeight: function () {
        let height = window.innerHeight
        height = height - 220
        return height
      },
    },
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      handleSelectionChange(row) {
        console.log(row)
      },
      handleMenuClick(row) {
        this.$options.methods[row].call(this)
      },
      delete() {
        alert('删除')
      },
      update() {
        alert('修改')
      },
      query() {
        alert('查询')
      },
    },
    created() {},
    mounted() {},
  }
</script>

<style lang="less" scoped>
  .ms-table {
    border-radius: 5px;
    background: rgba(48, 89, 224, 0.3);
    overflow: hidden;
  }
  /*最外层透明*/
  .ms-table /deep/ .el-table,
  .ms-table /deep/ .el-table__expanded-cell {
    background-color: transparent;
    color: white;
  }
  /* 表格内背景颜色 */
  .ms-table /deep/ .el-table th,
  .ms-table /deep/ .el-table tr,
  .ms-table /deep/ .el-table td {
    background-color: transparent !important;
    //表格字体颜色
    color: #ffffff;
  } /* 表格表头字体颜色 */
  /deep/ .el-table thead {
    color: #44d3e4;
    font-weight: 500;
  }
  // 分页样式改造
  /deep/ .el-pagination.is-background .btn-prev {
    background: transparent;
    border-radius: 2px;
    border: 1px solid #295a85;
    color: #fff;
  }
  /deep/ .el-pagination.is-background .btn-next {
    background: transparent;
    border-radius: 2px;
    border: 1px solid #295a85;
    color: #fff;
  }
  /deep/ .el-pagination.is-background .el-pager li {
    background: transparent;
    border-radius: 2px;
    border: 1px solid #295a85;
    color: #fff;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #409eff;
  }
  /deep/ .el-pagination__editor.el-input .el-input__inner {
    background: transparent;
    border: 1px solid #295a85;
    color: #fff;
  }
  /deep/ .el-pagination__total,
  /deep/ .el-pagination__jump {
    color: #fff;
  }
  .vButton {
    background: rgba(0, 242, 255, 0.2);
    border-radius: 2px;
    border: 1px solid #295a85;
  }
</style>
